<template>
  <section>
    <el-row :gutter="20">
      <el-col :span="4"  :offset="20">
        <el-button

            type="primary"
            size="small"
            @click="handleEdit({id:0})"
            icon="el-icon-plus"
        >
          添加商品
        </el-button>
      </el-col>
    </el-row>
    <egrid
        class="egrid"
        stripe
        border
        :data="pager.pager.records"
        :columns="columns"
    />
    <el-row>
      <el-col
          :span="6"
          :offset="18"
      >
        <el-pagination
            style="float:right"
            layout="prev, pager, next"
            :total="pager.pager.total"
            :page-size="pager.pager.size"
            :current-page.sync="pager.pager.current"
            v-show="true"
            @current-change="changePage"
        />
      </el-col>
    </el-row>
    <AddAndEdit  v-model="addAndEditValue"
                 @on-show-change="addAndEditDone"></AddAndEdit>
  </section>
</template>

<script>
import Ops from "@/views/pages/good/common/ops";
import AddAndEdit from "./AddAndEdit";
export default {
  name: "index",
  components: {
    AddAndEdit: AddAndEdit
  },
  data(){
    return {
      applications: [],
      columns: [
        { label: "ID", width: "55", align: "center", prop: "id" },
        {
          label: "条形码",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "barCode"
        },
        {
          label: "名称",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "name"
        },
        {
          label: "供应商",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "supplier"
        },
        {
          label: "价格",
          "show-overflow-tooltip": true,
          align: "center",
          prop: "price"
        },
        {
          label: "操作",
          align: "center",
          component: Ops,
          listeners: {
            deleteDone: this.loadData,
            editRow: this.handleEdit
          }
        }
      ],
      pager: {

        pager: {
          current: 0,
          size: 15,
          total:10,
          records: []
        },
        paras: {
          key: ""
        }
      },
      addAndEditValue: {
        show: false,
        good: { id: 0 }
      },
    }
  },
  methods:{
    loadData(){
      this.$api.common.goodList(this.pager.pager, result => {
        console.info(result)
        this.pager.pager=result;
        console.info(this.pager)

      });
    },
    handleEdit(row){
      this.addAndEditValue = {
        show: true,
        good: this.$clone(row),
        applications: this.$clone(this.applications)
      };
    },
    addAndEditDone(data) {
      this.addAndEditValue.show = data.visible;
      this.addAndEditValue.good = data.good;
      this.changePage();
    },
    changePage(e){

      this.loadData()
      console.info(e)
    }
  },
  created() {
    this.loadData();
    // this.loadApplications();
  }
}
</script>

<style scoped>

</style>